<template lang="pug">
div
  nav-div

  table.ui.table
    tr 
      td 标题
      td 
         .ui.input.title-style
           input(v-model="article.title" )
      td 编辑者
      td 
         .ui.input
           input(v-model="article.author")        
      td 排序值
      td 
         .ui.input
           input(v-model="article.order_index") 
      td 显示
         .ui.input
           input(type='checkbox', :value='true', v-model="article.hidden")
    tr
      td 封面图片
        .ui.input
          img-upload(v-bind:src.sync="article.image")
      td
         .ui.button(@click="saveArticle(article)") 保存 
div#main
  textarea(class="xheditor {width:'100%',height: '500px'}")   
</template>
<script>
import { createArticle,showArticle,updateArticle} from '../../vuex/action'
import NavDiv from '../../modules/nav'
import imgUpload from '../../modules/upload/img'

export default {
  name: 'new',
  components: {
    NavDiv,
    imgUpload,
  },
  vuex: {
    getters: {
      articleSource: ({ article }) => article.article,
    },
    actions: {
      createArticle,
      updateArticle,
      showArticle
    }
  },
  data () {
    return {
      id: null,
      article: {

      }
    }
  },
  ready () {
     this.load()
  },
  route: {
    data({ to: { params: { id }, query: { mode } } }) {
      this.id = id
    }
  },
  methods: {
     load(){
      if(this.id){
        catchError(async () => {
          await this.showArticle({id: this.id})
        })
      }
    },
    saveArticle(article) {
      var vhtml = $("#xhe0_iframe").contents().find(".editMode").html()
      console.log(vhtml)
      article.content = vhtml
      catchError(async () => {
        if(article.id){
          await this.updateArticle(article)
        }
        else {
          await this.createArticle(article)
        }
      }, '保存成功')
      /*window.location.href = '/articles'*/
      /*router.go({name: 'articles'})*/
    },
  },
  watch: {
    articleSource: {
      handler (val, old) {
        console.log(val)
        this.article = _.cloneDeep(val)
        $("#xhe0_iframe").contents().find(".editMode").html( this.article.content)
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style scoped>
.title-style {
  margin-left: -100%;
  width: 200%;
}
</style>
